<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论详情</title>

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <link rel="stylesheet" href="./css/pl.css">
</head>



<body>

    <!-- 上方用户信息菜单区域 -->

    <div style="position: sticky;top:0px;left: 0px;background-color: #fff;z-index: 1;" class="p-2 menus">
        <div class="m-2 jg fs">
            <!-- 排版用,无内容 -->
            <div></div>
            <!-- src用户头像加载前展示图片 -->
            <!-- 图片 -->
            <div>
                <img id="imgLogo" src="./img/tp10.jpg" alt="">
            </div>
            <!-- 返回首页 -->
            <div>
                <span id="sy" class="sb">首页</span>

            </div>

        </div>

        <!-- 搜索框 -->
        <div class="m-2 jg2 main">
            <div class="btn-group">
                <input type="text" id="txtqtitle" class="form-control" placeholder="想了解什么呢" size="20">
                <button type="text" class="input-group-text" id="btnquery">搜索</button>
            </div>
        </div>

        <!-- 上方右边展示 -->
        <div class="m-2 jg fs">
            <!-- 未登录展示图片为登录.登录则展示个人头像,将title值清空 -->

            <div class="menu">
                <!-- 图片 -->
                <div>
                    <img id="imgLogo11" src="./img/tp10.jpg" alt="">
                </div>
                <!-- 弹出菜单 -->
                <div class="pop-menu">
                    <div id="spUser">
                        <span>
                            用户名
                        </span>
                    </div>

                    <div>
                        <span id="spUser" data-bs-toggle="modal" data-bs-target="#userDialog" class="dropdown-item"> 用户设置</span>
                    </div>

                    <div>
                        <span id="spEmail" data-bs-toggle="modal" data-bs-target="#yxDialog" class="dropdown-item">绑定邮箱</span>
                    </div>

                    <div>
                        <span id="spEmail" data-bs-toggle="modal" data-bs-target="#sjDialog" class="dropdown-item">绑定手机</span>
                    </div>



                    <div>
                        <div id="spExit">安全退出</div>
                    </div>
                </div>


            </div>
            <span class="sb" id="btnadd">添加好友</span>

        </div>

    </div>


    <!-- 内容 -->
    <div class="">
        <div class="">
            <div class="p-2 pl">
                <div class="zjnr">
                    <div>
                        <img class="m-4" id="imgLogo12" src="https://tupian.qqw21.com/article/UploadPic/2020-4/202042621381456461.jpg" alt="">
                        <span id="mc" class="zy">zzz</span>
                    </div>

                    <div>
                        <span class="sb" id="btngz">关注</span>
                    </div>

                </div>
                <div class="pll2">
                    <span id="pingl"></span>
                </div>
                <div class="pl1">
                    <span id="dz0" class="m-2 sb">点赞</span>
                    <span id="dj0" class="m-2">点击率</span>
                    <span class="m-2 sb" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#jbDialog">举报</span>
                </div>
                <hr>
                <div class="pl1">
                    <input id="nr" type="text" class="form-control" placeholder="输入想发表的评论" size="20">
                    <button id="ok" type="text" class="input-group-text">发布</button>
                </div>


            </div>
        </div>
    </div>

    <div class="page">
        <div class="content">
            <div id="datalist" class="list" style="background-color: #fff;">
                <!-- item div0 -->
                <div class="item">
                    <img class="avator" src="img/tp10.jpg" alt="">
                    <!-- info div2 -->
                    <div class="info">
                        <div class="email"></div>
                        <div class="time"></div>
                        <div class="text word3"></div>
                        <!-- do div6 -->
                        <div class="do">
                            <div class="good btn"></div>
                            <div class="look btn"></div>
                        </div>
                    </div>
                </div>
                <!-- <div class="item">
                <div class="avator">
                    <img id="imgLogo2" src="img/e.jpg" alt="">
                </div>
                <div class="info">
                    <div id="zh2" class="email"></div>
                    <div id="sj2" class="time"></div>
                    <div id="bt2" class="text word3"></div>
                    <div class="do">
                        <div id="dianzhan2" class="good btn"></div>
                        <div id="dj2" class="look btn"></div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="avator">
                    <img id="imgLogo3" src="img/e.jpg" alt="">
                </div>
                <div class="info">
                    <div id="zh3" class="email"></div>
                    <div id="sj3" class="time"></div>
                    <div id="bt3" class="text word3"></div>
                    <div class="do">
                        <div id="dianzhan3" class="good btn"></div>
                        <div id="dj3" class="look btn"></div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="avator">
                    <img id="imgLogo4" src="img/e.jpg" alt="">
                </div>
                <div class="info">
                    <div id="zh4" class="email"></div>
                    <div id="sj4" class="time"></div>
                    <div id="bt4" class="text word3"></div>
                    <div class="do">
                        <div id="dianzhan4" class="good btn"></div>
                        <div id="dj4" class="look btn"></div>
                    </div>
                </div>
            </div> -->
            </div>

        </div>
    </div>

    <!-- 分页的部分 -->
    <nav id="navpage" class="pagination text-center m-2">
        <span class="page-link">上一页</span>
        <span class="page-link"></span>
        <span class="page-link">下一页</span>
    </nav>



    <!-- 绑定邮箱对话框 -->
    <div id="yxDialog" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">用户邮箱绑定</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">

                    <div class="m-3">
                        <input type="text" class="form-control" id="txtEmail" placeholder="邮箱">
                    </div>

                    <div class="m-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="txtEmailCode" placeholder="邮箱验证码">
                            <span id="btnEmailCode" class="input-group-text">获取邮箱验证码</span>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button id="btnEmail" type="button" class="btn btn-primary">
                        保存
                    </button>

                </div>
            </div>
        </div>
    </div>

    <!-- 绑定手机对话框 -->
    <div id="sjDialog" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">用户邮箱绑定</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="m-3">
                        <input type="text" class="form-control" id="txtphone" placeholder="手机号码">
                    </div>

                    <div class="m-3">
                        <div class="input-group">
                            <input id="txtimageCode" type="text" class="form-control" placeholder="图片验证码">
                            <img id="imageCode" src="" alt="">
                        </div>
                    </div>


                    <div class="m-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="txtcode" placeholder="手机验证码">
                            <span id="btncode" class="input-group-text">获取手机验证码</span>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button id="btnbd" type="button" class="btn btn-primary">
                        保存
                    </button>

                </div>
            </div>
        </div>
    </div>

    <!-- 举报弹框 -->
    <div id="jbDialog" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">举报</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">

                    <div class="m-2">
                        <input type="text" id="txtatitle" placeholder="举报原因" class="form-control">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button id="btnjb" class="btn btn-success">
                        确定
                    </button>

                </div>
            </div>
        </div>
    </div>

    <dialog>
        <div>
            <input type="text" id="txttitle" placeholder="举报原因" class="form-control">
        </div>
        <div>

        </div>

        <hr>

        <form method="dialog">
            <button id="btnjbm">确定</button>
            <button>关闭</button>
        </form>

    </dialog>

    <!-- 用户信息修改对话框 -->
    <div id="userDialog" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">用户信息修改</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div id="divModify">
                        <div class="m-3">
                            <input type="text" class="form-control" id="txtImg" placeholder="用户头像url">
                        </div>

                        <div class="m-3">
                            <input type="text" class="form-control" id="txtInfo" placeholder="用户描述">
                        </div>

                        <div class="m-3">
                            <input type="text" class="form-control" id="txtNickname" placeholder="用户姓名">
                        </div>

                        <div class="m-3">
                            <input type="text" class="form-control" id="txtQq" placeholder="QQ号">
                        </div>

                        <div class="m-3">
                            <input type="text" class="form-control" id="txtWechat" placeholder="微信号">
                        </div>

                        <div class="m-3">

                            <div class="form-check form-check-inline">
                                <input type="radio" id="sexm" name="sex" class="form-check-input">
                                <label for="sexm">男神</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input type="radio" id="sexf" name="sex" class="form-check-input">
                                <label for="sexf">女神</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input type="radio" id="sexn" name="sex" class="form-check-input">
                                <label for="sexn">保密</label>
                            </div>


                        </div>

                    </div>

                    <div id="divShowInfo"></div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button id="btnSave" type="button" class="disabled btn btn-primary">
                        保存
                    </button>
                    <button id="btnChange" class="btn btn-success">编辑</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 公用消息轻提示 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">服务器消息</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>
    <!-- 公用消息轻提示结束 -->

    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

    <script src="./js/pl.js" type="module"></script>
</body>

</html>